@import 'design-system/mixins/default';
@import 'design-system/variables/variables';
@import 'alignment';
@import 'layout';
@import 'spacing';
@import 'design-system/themes/light';
@import 'design-system/themes/dark';

body {
  background-color: var(--bg-default-high);
}

code {
  background: var(--bg-default-medium);
  padding: $space-2 $space-4;
}

// vue-icon global style
i {
  display: inline-flex;
  height: $text-2;
  width: $text-2;
  justify-content: center;
  align-items: center;

  svg {
    height: inherit;
    width: inherit;
  }
}

hr {
  border: none;
  border-top: 1px solid var(--border-default-low);
  margin-top: -1px;
}

table {
  thead,
  tbody {
    tr {
      border-bottom: 1px solid var(--border-default-low);

      td,
      th {
        padding: $space-24;
        text-align: left;
      }
    }
  }

  thead {
    background: var(--bg-default-medium);
  }

  tbody {
    tr {
      &:last-child {
        border-bottom: none;
      }
    }
  }
}

// UTILITIES
// =========

// always make sure images have an alt attribute
img:not([alt]) {
  border: 5px dashed var(--danger);
}

// Only display content to screen readers
//
// See: https://a11yproject.com/posts/how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

// cut off text if too long
//
// See: https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// MODAL-BACKDROP
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  z-index: -1;
  backdrop-filter: blur(4px);
  transition: backdrop-filter var(--brand-transition-duration) var(--brand-easing-curve);

  &.show {
    opacity: 1;
    z-index: 999;
  }
}

// TODO: demo, please remove
@include add-theme-variable(
  'landing-hero-link-color',
  (
    'light': palette-color-level('info', 4),
    'dark': palette-color-level('info', 6),
  )
);
